<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=8scLv7YneA5YNgLS5d9pqWlozOdUUEMy"></script>
  <title>根据城市名称定位</title>
  <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

  <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
  <style>
    html, body, #allmap{
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    #result{
      padding: 7px 10px;
      position: fixed;
      top: 10px;
      right: 20px;
      width: 300px;
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      border-radius: 7px;
      z-index: 99;
    }
    #cityName{
      width:170px;
      margin-right:10px;
      height:25px;
      border: 1px solid rgba(27, 142, 236, 0.5);
      border-radius: 5px;
    }
    #result button{
      border: 1px solid rgba(27, 142, 236, 0.5);
      border-radius: 5px;
      background: rgba(27, 142, 236, 0.5);
      color: #fff
    }

    .draw-panel {
      z-index: 999;
      position: fixed;
      bottom: 3.5rem;
      margin-left: 3rem;
      padding: 1rem 1rem;
      border-radius: .25rem;
      background-color: #fff;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .draw-btn {
      width: 75px;
      height: 30px;
      background-color: #fff;
      color: rgba(27, 142, 236, 1);
      border:1px solid rgba(27, 142, 236, 1);
      border-radius: 5px;
      margin: 0 5px;
    }
    .drawing-panel {
      z-index: 999;
      position: fixed;
      bottom: 3.5rem;
      margin-left: 2.5rem;
      padding-left: 0;
      border-radius: .25rem;
      height: 47px;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      left: 250px;
    }
    .bmap-btn {
      border-right: 1px solid #d2d2d2;
      float: left;
      width: 64px;
      height: 100%;
      background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
      cursor: pointer;
    }
    .drawing-panel .bmap-marker {
      background-position: -65px 0;
    }
    .drawing-panel .bmap-polyline {
      background-position: -195px 0;
    }
    .drawing-panel .bmap-rectangle {
      background-position: -325px 0;
    }
    .drawing-panel .bmap-polygon {
      background-position: -260px 0;
    }
    .drawing-panel .bmap-circle {
      background-position: -130px 0;
    }

    ul li {list-style: none;}

  </style>
</head>
<body>
<ul class = "drawing-panel">
  <li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>
<ul class = "draw-panel">
  <input type="button" class="draw-btn" value="开启测距" onclick="myDis.open()">
  <input type="button" class="draw-btn" value="关闭测距" onclick="myDis.close()">

</ul>
<div id='allmap'></div>
<div id='result'>
  城市名: <input id="cityName" type="text"/>
  <button onclick="theLocation()"/>查询</button>
</div>
<script>
  // 百度地图API功能
  var map = new BMapGL.Map("allmap");
  var point = new BMapGL.Point(121.568735,38.926334);
  map.centerAndZoom(point,11);

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
  map.addControl(zoomCtrl);

  function theLocation(){
    var city = document.getElementById("cityName").value;
    if(city != ""){
      map.centerAndZoom(city,11);      // 用城市名设置地图中心点
    }
  }

  var myDis = new BMapGLLib.DistanceTool(map);

  // 监听测距过程中的鼠标事件
  myDis.addEventListener('drawend', function(e) {
    console.log("drawend");
    console.log(e.points);
    console.log(e.overlays);
    console.log(e.distance);
  });
  myDis.addEventListener("addpoint", function(e) {
    console.log("addpoint");
    console.log(e.point);
    console.log(e.pixel);
    console.log(e.index);
    console.log(e.distance);
  });
  myDis.addEventListener("removepolyline", function(e) {
    console.log("removepolyline");
    console.log(e);
  });

  var styleOptions = {
    strokeColor: '#5E87DB',   // 边线颜色
    fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
    strokeWeight: 2,          // 边线宽度，以像素为单位
    strokeOpacity: 1,         // 边线透明度，取值范围0-1
    fillOpacity: 0.2          // 填充透明度，取值范围0-1
  };
  var labelOptions = {
    borderRadius: '2px',
    background: '#FFFBCC',
    border: '1px solid #E1E1E1',
    color: '#703A04',
    fontSize: '12px',
    letterSpacing: '0',
    padding: '5px'
  };

  // 实例化鼠标绘制工具
  var drawingManager = new BMapGLLib.DrawingManager(map, {
    // isOpen: true,        // 是否开启绘制模式
    enableCalculate: false, // 绘制是否进行测距测面
    enableSorption: true,   // 是否开启边界吸附功能
    sorptiondistance: 20,   // 边界吸附距离
    circleOptions: styleOptions,     // 圆的样式
    polylineOptions: styleOptions,   // 线的样式
    polygonOptions: styleOptions,    // 多边形的样式
    rectangleOptions: styleOptions,  // 矩形的样式
    labelOptions: labelOptions,      // label样式
  });

  function draw(e) {
    var arr = document.getElementsByClassName('bmap-btn');
    for(var i = 0; i<arr.length; i++) {
      arr[i].style.backgroundPositionY = '0';
    }
    e.style.backgroundPositionY = '-52px';
    switch(e.id) {
      case 'marker': {
        var drawingType = BMAP_DRAWING_MARKER;
        break;
      }
      case 'polyline': {
        var drawingType = BMAP_DRAWING_POLYLINE;
        break;
      }
      case 'rectangle': {
        var drawingType = BMAP_DRAWING_RECTANGLE;
        break;
      }
      case 'polygon': {
        var drawingType = BMAP_DRAWING_POLYGON;
        break;
      }
      case 'circle': {
        var drawingType = BMAP_DRAWING_CIRCLE;
        break;
      }
    }
    // 进行绘制
    if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
      drawingManager.close();
    } else {
      drawingManager.setDrawingMode(drawingType);
      drawingManager.open();
    }
  };
</script>
</body>
</html>
